The main Component of our React Quiz will be the Quiz Component. In the last tutorial, we have integrated the React WP Scripts into our plugin. Now, we are going to move forward by changing the files and adding new ones.
If you have yet to learn how to integrate the React WP Scripts into your plugin, please check the last tutorial: Building a Quiz with React and WordPress REST API: React WP Scripts Tool.
Before continuing, we want to be specific when building React Components and React Apps. The word App is too general. Let’s go into our folder inc/react-wp/src and change App.js into Quiz.js and App.css to Quiz.css. Then open index.js and change it like this:
Fetching Quiz Questions
Our Quiz Component will need to fetch questions from our WordPress site. This will be done using our REST API endpoints. Open Quiz.js and change App into Quiz.
Let’s now define our constructor method where we need to create the initial state and bind some methods.
We are calling super() so that everything gets defined and set for the Component class which we extend with our Quiz Component. We have also defined wpqr as a global object so that we can use it inside our code without getting any errors from the react-wp-scripts tool.
The state is defined with all the defaults that we need for our Quiz. This is something you might get back to and re-define while building your own React app.
After that, we are binding fetchQuestions to this so that we can use this inside that method. The last thing we do is calling the method.
The Method fetchQuestions
To fetch all the available questions for our Quiz, we will need to fetch them from our previously defined REST API endpoint wpqr/v1/questions. We are using the Fetch API. You can read on how to use it here.
Basically, we are making a GET request on that endpoint. When we get a response, we are converting it into JSON and in the next promise we are filling the state with the provided JSON as questions. We are also setting the state.lastQuestion if we have only 1 question.
Rendering the Quiz Component
To render our Quiz Component and showing the correct output, we will rely on our state.
I’ve tried to explain everything with the comments inside the code, but here is the summary of it:
- We check if there is a score in the state to show that,
- Otherwise, we are showing the current Question,
- We are disabling the button if there is no answer to the current question,
- The button will become a ‘Get Score’ button only if we are on the last question.
We are enabling the button only if our state.answers has an answer for that Questions’ ID. As you can see from the code, we are missing two Components: Question and Score. That will be done in the next tutorials.
If you also look closely at our code in the method render, you might notice that there are some other methods passed to our button that we don’t have yet. Those methods are: setNextQuestion and getScore.
There is also a third method missing and that is for setting an answer to the current Question. This method setAnswer will be used inside the Question Component.
Method for the Next Question
Again, to use a custom method, we need to bind that method to this. So let’s add some code to our constructor method.
The workflow of changing to the next question is:
- Get the current Question from the state (index),
- Get the total number of Questions in the state,
- Raise the index of the current Question by 1
- Check if we have enough Questions
- Set the current Question in the state to our new index,
- Check if the current Question is also the last Question and update the state.
Defining the Missing Methods
Let’s now also define our missing methods getScore and setAnswer so that our compiler will run without issues and that we have something to work with in the next tutorial.
First, of course, is the constructor. You, probably, already know what is going to happen: binding.
Since getScore is using the other REST API endpoint, I will leave that for the tutorial on getting the Score and showing it. But feel free to try it out and see if you can make it work. Actually, I encourage you to do so.
The setAnswer method is a simple one. This method will take two parameters answer and question. The parameter answer will be the order of the answer in that question. In our metabox, that we have done in the previous tutorial on creating CPT and REST API Routes, the answers order goes from 0 to 2 (3 answers).
The parameter question will be the ID of the question. In the method setAnswer, we will retrieve all the answers from the state, update them with our new answer and set the answers back to the state.
Conclusion
When building React Apps, it is important to know how to handle the state and how to use it for loading the output conditionally. I might be wrong since I am just beginning my journey in React Development. Any experts in that field, feel free to advise me and others in the comments below 🙂
In the next tutorial, we will create two new components: Question and Answer. Try to create them on your own and then check on how I did it.
Share this: